<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WD_Chao 智能车控制</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/reset.css">

    <script src="./static/js/zepto.min.js"></script>
    <script src="./static/js/base.js"></script>

    <script>
        var ws;
        $(function () {
            // 打开一个 web socket
            ws = new WebSocket("ws://www.bzchao.com:19900/auth=admin");
            ws.onopen = function () {
                // Web Socket 已连接上，使用 send() 方法发送数据
                $("#car_status").text("小车已连接")
                ws.send("客户端测试数据请求");
            };
            ws.onmessage = function (evt) {
                console.log(evt);
                carData = evt.data;
                $('#car-speed-show').text(carData.car_speed);

                return;
                $('#car-wendu').text(data.temperature + "℃");
                $('#cat-shidu').text(data.humidity + '%');
                var ultwidth = data.ultrasonic + '%';
                $('#ultrasonic_bar').css({'width': ultwidth});
                $('#ultrasonic_text').text('超声波:' + ultwidth);
                var hongwaiArray = [$('#hy-top-left'), $('#hy-top-right'), $('#hy-bottom-left'), $('#hy-bottom-right')];
                $.each(data.hongwai, function (index, item) {
                    if (item == 1) {
                        hongwaiArray[index].show();
                    } else {
                        hongwaiArray[index].hide();
                    }
                });
            };
            ws.onclose = function () {
                // 关闭 websocket
                alert("连接已关闭...");
                $("#car_status").text("小车已关机")
            };
        });


        function exc_cmd_input() {
            let cmdText = $("#web_cmd").val();
            ws.send(cmdText);
        }

        function exc_cmd(str) {
            ws.send(str);
        }

        var ints = []

        // 用于给按钮绑定事件函数
        function TouchStaartAndTouchEnd(btn, module, startmotion, endmotion) {
            btn.on('touchstart mousedown click', function (e) {
                console.log("down")
                var myVar = setInterval(exc_cmd, 100, startmotion);
                ints.push(myVar)
            }).on('touchend mouseup', function (e) {
                //延迟执行stop命令，解决stop命令先执行，操作命令还在执行的问题
                setTimeout(function () {
                    console.log("up")
                    exc_cmd(endmotion)
                    $.each(ints, function (index, item) {
                        clearInterval(item)
                    })
                }, 100)
            });
        }

        $(function () {
            $('#manual').addClass('nav-active');
            // 小车
            TouchStaartAndTouchEnd($('#cat-move-up'), 1, '$4WD.RUN.1.0#', '$4WD.CMD.STOP#');
            TouchStaartAndTouchEnd($('#car-move-right'), 1, '$4WD.RUN.4.0#', '$4WD.CMD.STOP#');
            TouchStaartAndTouchEnd($('#car-move-left'), 1, '$4WD.RUN.3.0#', '$4WD.CMD.STOP#');
            TouchStaartAndTouchEnd($('#car-move-down'), 1, '$4WD.RUN.2.0#', '$4WD.CMD.STOP#');
            TouchStaartAndTouchEnd($('#car-speed-sub'), 1, '$4WD.RUN.0.1#', 'stop');
            TouchStaartAndTouchEnd($('#car-speed-add'), 1, '$4WD.RUN.0.2#', 'stop');
            // 摄像头
            TouchStaartAndTouchEnd($('#cam-move-up'), 2, '$4WD,PTZ.3.001#', '$4WD.PTZ.0.000#');
            TouchStaartAndTouchEnd($('#cam-move-right'), 2, '$4WD,PTZ.2.002#', '$4WD.PTZ.0.000#');
            TouchStaartAndTouchEnd($('#cam-move-down'), 2, '$4WD,PTZ.3.002#', '$4WD.PTZ.0.000#');
            TouchStaartAndTouchEnd($('#cam-move-left'), 2, '$4WD,PTZ.2.001#', '$4WD.PTZ.0.000#');
            // 超声波
            TouchStaartAndTouchEnd($('#ultrasonic_left'), 3, 'left', 'stop');
            TouchStaartAndTouchEnd($('#ultrasonic_middle'), 3, 'middle', 'stop');
            TouchStaartAndTouchEnd($('#ultrasonic_right'), 3, 'right', 'stop');
        })
    </script>

</head>
<body>
<div class="main">
    <!--导航条-->
    <div class="container-fluid" style="height: 10%">
        <div class="row">
            <div class="col-xs-2"
                 style="border-right: 1px solid #00aeff;border-bottom-right-radius: 100%;border-bottom: 1px solid #00aeff;color: white">
                <li id="main_tips" style="color:red;">手机请横屏，并开启全屏模式</li>
                <li>开源代码：<a href="http://github.com/bzsome">http://github.com/bzsome</a></li>
                <li>当前可用：智能车遥控、摄像头控制</li>
                <li>正在测试：超声波距离，控制器温度，障碍物监测</li>
                <li>后期计划：人体跟踪、语音控制、人脸识别</li>
            </div>
            <div class="col-xs-1"
                 style="border-left: 1px solid #00aeff;border-bottom-left-radius: 100%;border-bottom: 1px solid #00aeff"></div>
            <div class="col-xs-6" style="border-bottom: 1px solid #00aeff;">
                <ul class="nav">
                    <!--<li class="nav-active">手动驾驶</li>-->
                    <li id="manual">手动驾驶</li>
                    <li id="car_status">小车已关机<br>请刷新网页</li>
                    <!--
                    <li id="self-motion">自动驾驶</li>
                    <li id="obstacle">红外避障</li>
                    <li id="trailing">红外寻迹</li>
                    <li id="voice">语音控制</li>-->
                </ul>
            </div>
            <div class="col-xs-2 nav-right"
                 style="border-right: 1px solid #00aeff;border-bottom-right-radius: 100%;border-bottom: 1px solid #00aeff;color: white">
            </div>
        </div>
    </div>

    <!--红外感应器下-->
    <div class="container-fluid" style="height:42%">
        <div class="row"></div>
    </div>
    <!--红外感应器下-->
    <div class="container-fluid" style="height: 12%;">
        <div class="row">
            <div class="col-xs-1" style="padding: 0">
                <img src="./static/img/hy-top-left.png" alt="红外" style="left: 50%;top: 50%"
                     class="cat-hy img-responsive" id="hy-top-left">
            </div>
            <div class="col-xs-1 col-xs-offset-1" style="padding: 0">
                <img src="./static/img/hy-top-right.png" alt="红外" style="left: 0;top: 50%;"
                     class="cat-hy img-responsive" id="hy-top-right">
            </div>
            <div class="col-xs-1 col-xs-offset-7"
                 style="padding: 0; text-align: center; font-weight: bold;color: red; font-size: 16px">
                <span id="car-wendu">56℃</span>
            </div>
            <div class="col-xs-1" style="padding: 0; text-align: center; font-weight: bold;color: red; font-size: 16px">
                <span id="cat-shidu">50%</span>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="height: 36%;">
        <!--向上移动按钮-->
        <div class="row" style="height: 33.32%;">
            <div class="col-xs-1 col-xs-offset-1 btn-up" id="cat-move-up"></div>
            <!--超声波模块-->
            <div class="col-xs-4 col-xs-offset-2" style="height: 50%">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                         aria-valuemin="0" aria-valuemax="100" style="width: 45%;" id="ultrasonic_bar">
                        <span id="ultrasonic_text">超声波:45%</span>
                    </div>
                </div>
            </div>
            <div class="col-xs-1 col-xs-offset-2 btn-up" id="cam-move-up"></div>
        </div>
        <!--左右-超声波-->
        <div class="row" style="height: 33.32%;">
            <div class="col-xs-1 btn-left" id="car-move-left"></div>
            <div class="col-xs-1 btn-cat"></div>
            <div class="col-xs-1 btn-right" id="car-move-right"></div>
            <!--超声波控制按钮-->
            <div class="col-xs-1 col-xs-offset-1" style="padding-left: 1%;padding-right: 1%">
                <div style="border: 1px solid #5bc0de;border-radius: 100%;height: 80%;text-align: center;"
                     id="ultrasonic_left">
                    <span style="font-weight: bold;font-size: 16px;color: #5bc0de; line-height: 200%">左</span>
                </div>
            </div>
            <div class="col-xs-2" style="padding-left: 5%;padding-right: 1%; text-align: center">
                <div style="border: 1px solid #5bc0de;border-radius: 100%;height: 80%;width: 50%;text-align: center"
                     id="ultrasonic_middle">
                    <span style="font-weight: bold;font-size: 16px;color: #5bc0de; line-height: 200%">中</span>
                </div>
            </div>
            <div class="col-xs-1" style="padding-left: 1%;padding-right: 1%;text-align: center">
                <div style="border: 1px solid #5bc0de;border-radius: 100%;height: 80%" id="ultrasonic_right">
                    <span style="font-weight: bold;font-size: 16px;color: #5bc0de; line-height: 200%">右</span>
                </div>
            </div>
            <!--摄像头-->
            <div class="col-xs-1 col-xs-offset-1 btn-left" id="cam-move-left"></div>
            <div class="col-xs-1 btn-v"></div>
            <div class="col-xs-1 btn-right" id="cam-move-right"></div>
        </div>
        <!--向下-档位-->
        <div class="row" style="height: 33.32%">
            <div class="col-xs-1 col-xs-offset-1 btn-down" id="car-move-down"></div>

            <div class="col-xs-1 col-xs-offset-2 btn-left" id="car-speed-sub"></div>
            <div class="col-xs-2 btn-speed"><span style="color: red" id="car-speed-show">55</span></div>
            <div class="col-xs-1 btn-right" id="car-speed-add"></div>

            <div class="col-xs-1 col-xs-offset-2 btn-down" id="cam-move-down"></div>
        </div>
    </div>

    <img style="-webkit-user-select: none;display: block;z-index: -1" src="http://www.bzchao.com:18080/?action=snapshot"
         class="portrait cam_img">
    <!--<img style="-webkit-user-select: none;display: block;z-index: -1" src="http://192.168.1.190:4455/?action=stream" class="portrait">-->
    <!--mjpg_streamer -i "/dream_car/mjpg-streamer-experimental/input_raspicam.so -fps 15 -x 1280 -y 720" -o "/dream_car/mjpg-streamer-experimental/output_http.so -w ./www -p 4455"-->
    <!--遮挡层照片（用户竖屏的时候提示横屏）-->
    <img src="./static/img/trance.png" alt="" class="portrait img-responsiv clearfix" id="lesesss">
</div>
<script>
    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    $(function () {

        var n = 0;
        var grap_time = getUrlParam('grap_time') || 1000;

        setInterval(function () {
            $(".cam_img").attr('src', 'http://www.bzchao.com:18080/?action=snapshot&n=' + n++);
        }, grap_time)
    })
</script>
</body>
</html>